<!-- src/views/Home/HomeView.vue -->
<template>
  <el-container class="main-container">
    <!-- 内容区 -->
    <el-main class="content">
      <!-- 第一行：网站仪表数据 & 日记 tips 投稿 -->
      <el-row :gutter="20" class="row">
        <el-col :span="16">
          <el-card class="box-card">
            <HomeStaticNumber />
          </el-card>
        </el-col>
        <el-col :span="8">
          <HomeInfo />
        </el-col>
      </el-row>

      <!-- 第二行：活动推荐轮播 & 好贴推荐 & 热点新闻 & 操作记录 -->
      <el-row :gutter="20" class="row" align="stretch">
        <!-- 活动推荐轮播 -->
        <el-col :span="8">
          <PictureBanner :mode="'show'" :pictureList="pictureList" class="same-height" />
        </el-col>

        <!-- 好贴推荐 -->
        <el-col :span="6">
          <!-- 使用 NewsWall 组件并传递好贴推荐数据 -->
          <NewsWall :newsList="postRecommendations" />
        </el-col>

        <!-- 热点新闻 -->
        <el-col :span="6">
          <!-- 使用 NewsWall 组件并传递热点新闻数据 -->
          <NewsWall :newsList="hotNews" />
        </el-col>

        <!-- 操作记录 相关链接-->
        <el-col :span="4">
          <HomeLinkButtons />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import PictureBanner from '@/components/banner/PictureBanner.vue';
import NewsWall from '@/components/wall/NewsWall.vue';
import HomeStaticNumber from '@/views/Home/HomeStaticNumber.vue';
import HomeInfo from '@/views/Home/HomeInfo.vue';
import HomeLinkButtons from '@/views/Home/HomeLinkButtons.vue';
import NewsIcon from '@/components/icons/NewsIcon.vue';
import PostIcon from '@/components/icons/PostIcon.vue';

export default {
  name: 'HomeView',
  components: {
    PictureBanner,
    NewsWall,
    HomeStaticNumber,
    HomeInfo,
    HomeLinkButtons
  },
  data() {
    return {
      // 轮播图列表数据
      pictureList: [
        {
          title: '日落海滩',
          meta: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fHN1bnNldHxlbnwwfHx8fDE2MzY1NTg3MTQ&ixlib=rb-1.2.1&q=80&w=400',
          url: ''
        },
        {
          title: '山脉与森林',
          meta: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDIyfHxtb3VudGFpbnxlbnwwfHx8fDE2MzY1NTg4MDg&ixlib=rb-1.2.1&q=80&w=400',
          url: ''
        },
        {
          title: '城市夜景',
          meta: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDF8fGNpdHl8ZW58MHx8fHwxNjM2NTU4NzI5&ixlib=rb-1.2.1&q=80&w=400',
          url: ''
        },
        {
          title: '森林中的小路',
          meta: 'https://images.unsplash.com/photo-1504198266287-1659872e6590?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDcyfHxyb2FkfGVufDB8fHx8MTYzNjU1ODc4OQ&ixlib=rb-1.2.1&q=80&w=400',
          url: ''
        }
      ],
      // 好贴推荐数据
      postRecommendations: [
        {
          header: '好贴推荐',
          news: [
            {
              icon: PostIcon,
              news: '空间【编程】:大三学生学springboot做什么项目比较好呢？',
              url: 'https://example.com/news1'
            },
            {
              icon: PostIcon,
              news: '空间【咖啡】：阿卡贝拉豆子和罗布斯塔豆子有什么区别',
              url: 'https://example.com/news2'
            },
            {
              icon: PostIcon,
              news: '空间【读书】：2024年10月3日读书会报名通知',
              url: 'https://example.com/news5'
            },
            {
              icon: PostIcon,
              news: '空间【编程】：两年程序员的心路历程，我与焦虑的"相爱相杀"(1)',
              url: 'https://example.com/news6'
            },
            {
              icon: PostIcon,
              news: '空间【动漫】：宝可梦地平线最新剧情',
              url: 'https://example.com/news5'
            },
            {
              icon: PostIcon,
              news: '空间【宠物】：来看看我家小猫咪',
              url: 'https://example.com/news6'
            }
          ]
        }
      ],
      // 热点新闻数据
      hotNews: [
        {
          header: '热点新闻',
          news: [
            {
              icon: NewsIcon,
              news: '体育新闻标题1：东京奥运会精彩回顾',
              url: 'https://example.com/news3'
            },
            {
              icon: NewsIcon,
              news: '体育新闻标题2：欧洲杯最新战况',
              url: 'https://example.com/news4'
            },
            {
              icon: NewsIcon,
              news: '体育新闻标题3：FIFA 世界杯筹备情况',
              url: 'https://example.com/news8'
            },
            {
              icon: NewsIcon,
              news: '科技新闻：NBA 总决赛热门球队',
              url: 'https://example.com/news9'
            },
            {
              icon: NewsIcon,
              news: '科技新闻：东京奥运会精彩回顾',
              url: 'https://example.com/news3'
            },
            {
              icon: NewsIcon,
              news: '科技新闻：欧洲杯最新战况',
              url: 'https://example.com/news4'
            },
            {
              icon: NewsIcon,
              news: '科技新闻标题3：FIFA 世界杯筹备情况',
              url: 'https://example.com/news8'
            },
            {
              icon: NewsIcon,
              news: '体育新闻标题4：NBA 总决赛热门球队',
              url: 'https://example.com/news9'
            }
          ]
        }
      ]
    };
  }
};
</script>

<style scoped>
.main-container {
  width: 100%;
  overflow-x: hidden; /* 隐藏水平滚动条 */
}
html, body {
  width: 100%; /* 确保宽度为100% */
  margin: 0; /* 清除默认的外边距 */
  padding: 0; /* 清除默认的内边距 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
}

.content {
  overflow-x: hidden;
  flex: 1;
  padding: 20px;
  width: 100%;
}

.row {
  margin-bottom: 20px;
}

/* 确保各个区域高度一致 */
.same-height {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
</style>
